<template>
  <div class="h100">
    <el-row>
      <nest-tree active-route="CRM"/>
      <div class="layout-container">
        <router-view v-if="routePath && routePath.meta && routePath.meta.activePath" :key="routePath.meta.activePath"></router-view>
      </div>
    </el-row>
  </div>
</template>

<script>
import {reactive, toRefs, computed, onMounted, nextTick} from 'vue'
import {storeToRefs} from 'pinia'
import {useThemeConfig} from '/@/stores/themeConfig'
import {useRoute} from 'vue-router'
import NestTree from '/@/components/nestTree/index.vue'

export default {
  name: 'CrmIndex',
  components: {
    NestTree
  },
  setup() {
    const storesThemeConfig = useThemeConfig()
    const {themeConfig} = storeToRefs(storesThemeConfig)
    const route = useRoute()
    const state = reactive({
      refreshRouterViewKey: null,
      routePath: {}
    })
    // 设置主界面切换动画
    const setTransitionName = computed(() => {
      return themeConfig.value.animation
    })
    onMounted(() => {
      nextTick(() => {
        state.routePath = route
      })
    })
    return {
      ...toRefs(state),
      setTransitionName
    }
  }
}
</script>

<style scoped lang="scss">
.h100 {
  min-height: 100vh;
}

:deep(.el-menu-item) {
  color: var(--el-text-color-primary);
  height: 40px !important;
  line-height: 40px !important;
  margin: 16px 5px 16px;
  padding: 0 !important;
  text-align: center;
  display: flex;
  justify-content: center;
  width: 90px;
  overflow: hidden;

  &::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: -1px;
    bottom: -1px;
    right: -1px;
    left: -1px;
    background: var(--el-color-primary);
    transform: rotateZ(-90deg) translate(-100%, -100%);
    transform-origin: top left;
    transition: transform .3s;
    transition-timing-function: linear;
    border-radius: 4px;
  }

  span {
    position: absolute;
    z-index: 2;
    display: block;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
  }

  &::after {
    content: "";
    position: absolute;
    top: 1px;
    bottom: 1px;
    right: 1px;
    left: 1px;
    border-radius: 2px;
    background: var(--next-color-white);
    cursor: pointer;
  }

  &:hover {
    span {
      color: var(--el-color-primary);
    }

    &::before {
      transform: rotateZ(0deg) translate(0%, -0%);
    }
  }
}

:deep(.el-menu-item.is-active) {
  background-color: var(--el-color-primary-light-9) !important;
  color: var(--el-color-primary);
  margin: 16px 5px 16px;
  border-radius: 4px;
  padding: 0 !important;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;

  span {
    position: absolute;
    z-index: 2;
    display: block;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
  }

  &::after {
    content: "";
    position: absolute;
    top: 1px;
    bottom: 1px;
    right: 1px;
    left: 1px;
    border-radius: 2px;
    background: var(--el-color-primary-light-9);
    cursor: pointer;
  }

  &::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: -1px;
    bottom: -1px;
    right: -1px;
    left: -1px;
    background: var(--el-color-primary);
    transform: rotateZ(-90deg) translate(-100%, -100%);
    transform-origin: top left;
    transition: transform .3s;
    transition-timing-function: linear;
    transform: rotateZ(0deg) translate(0%, -0%);
  }
}

.menu-container {
  width: 100px;
  overflow: hidden;
  background: var(--next-color-white);
  position: relative;
  top: 0;
  left: 0;
  bottom: 0;
  box-shadow: rgba(0, 0, 0, 0.03) 1.95px 1.95px 2.6px;

  .el-menu-list {
    width: 100%;
  }
}

.layout-container {
  flex: 1;
  overflow: auto;
  height: 100vh;

  ::-webkit-scrollbar {
    width: 7px;
    height: 7px;
  }
}
</style>
